<template>
    <div style="position: relative;height: 100%;width: 100%">
        <div id="businessTitle">
            临时救助申请登记
        </div>
        <Steps :current="currentTab" id="Title">
            <Step title="家庭信息" content="" @click.native="clickStep(0)"></Step>
            <Step title="家庭成员" content="" @click.native="clickStep(1)"></Step>
            <Step title="基础收入" content="" @click.native="clickStep(2)"></Step>
            <Step title="家庭附件" content="" @click.native="clickStep(3)"></Step>
            <Step title="临时救助申请" content="" @click.native="clickStep(4)"></Step>
        </Steps>
        <div id="Content">
            <step1 v-if="currentTab == 0" @nextStep="nextStep"/>
            <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
            <step3 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
            <step4 v-if="currentTab === 3" @nextStep="nextStep" @prevStep="prevStep"/>
            <step5 v-if="currentTab === 4" @finish="finish" @prevStep="prevStep"/>
        </div>
    </div>
</template>

<script>
    import step1 from '../ls11_create_steps/application1'
    import step2 from '../ls11_create_steps/application2'
    import step3 from '../ls11_create_steps/application3'
    import step4 from '../ls11_create_steps/application10'
    import step5 from '../ls11_create_steps/application12'

    import '@/views/common/css/common.css';

    export default {
        name: "index",
        components: {
            step1,
            step2,
            step3,
            step4,
            step5,
        },
        data() {
            return {
                currentTab: 0,
                familyInfo: {
                    azdf0006: '',
                    azdf0007: '',
                    azdf0501: '',
                },
                applicationName: "",
                applicationType: ""
            }
        },
        methods: {
            edit(text) {
                this.applicationName = text.applicationName;
                this.applicationType = text.applicationType;
            },
            nextStep() {
                this.currentTab += 1
            },
            clickStep(currentTab) {
                if (currentTab < this.currentTab) {
                    this.currentTab = currentTab
                }
            },
            prevStep() {
                this.currentTab -= 1
            },
            finish() {
                this.familyInfo = {};
                this.currentTab = 0
            }

        }
    }
</script>

<style scoped>


    /deep/ .ivu-steps-item {
        cursor: pointer;
    }

</style>
